<template>
  <live-player
    v-if="playerConfig.src"
    :src="playerConfig.src"
    :id="playerConfig.id"
    :debug="playerConfig.debug"
    @statechange="handlePlayerStateChange"
    @netstatus="handlePlayerNetstatus"
    @error="handlePlayerError"
    class="h-100"
    autoplay
    mode="live"
    object-fit="fillCrop"
    min-cache="0.1"
    max-cache="0.3">
  </live-player>
</template>

<script>
  export default {
    data() {
      return {
        playerConfig: {
          src: 'http://192.168.2.196:8082/live/STREAM_NAME.flv', // 播放地址
          id: '11', // ID
          debug: false // 是否开启调试
        },
      }
    },
    methods: {
      handlePlayerStateChange(e) {
        console.log('拉流状态变化', e)
      },
      handlePlayerNetstatus(e) {
        console.log('拉流网络状态变化', e)
      },
      handlePlayerError(e) {
        console.log('拉流错误', e)
      }
    }
  }
</script>

<style>
.h-100 {
  display: block;
  width: 100%;
  height: 100vh;
}
</style>
